// loading gif
.sz-attendance-container {
    .attendance-content-wrap {
        position: relative;
        .loading {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: #fff;
            z-index: 110;
            .loading-content {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -80%);
            }
            .sk-cube-grid {
                width: 36px;
                height: 36px;
                margin: 0px auto 4px;
                /*
                 * Spinner positions
                 * 1 2 3
                 * 4 5 6
                 * 7 8 9
                 */
            }
            .sk-cube-grid .sk-cube {
                width: 12px;
                height: 12px;
                background-color: #73A7F9;
                float: left;
                box-sizing: border-box;
                border: 1px solid transparent;
                background-clip: content-box;
                -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
                animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
            }
            .sk-cube-grid .sk-cube1 {
                -webkit-animation-delay: 0.2s;
                animation-delay: 0.2s;
            }
            .sk-cube-grid .sk-cube2 {
                -webkit-animation-delay: 0.3s;
                animation-delay: 0.3s;
            }
            .sk-cube-grid .sk-cube3 {
                -webkit-animation-delay: 0.4s;
                animation-delay: 0.4s;
            }
            .sk-cube-grid .sk-cube4 {
                -webkit-animation-delay: 0.1s;
                animation-delay: 0.1s;
            }
            .sk-cube-grid .sk-cube5 {
                -webkit-animation-delay: 0.2s;
                animation-delay: 0.2s;
            }
            .sk-cube-grid .sk-cube6 {
                -webkit-animation-delay: 0.3s;
                animation-delay: 0.3s;
            }
            .sk-cube-grid .sk-cube7 {
                -webkit-animation-delay: 0s;
                animation-delay: 0s;
            }
            .sk-cube-grid .sk-cube8 {
                -webkit-animation-delay: 0.1s;
                animation-delay: 0.1s;
            }
            .sk-cube-grid .sk-cube9 {
                -webkit-animation-delay: 0.2s;
                animation-delay: 0.2s;
            }
            @-webkit-keyframes sk-cubeGridScaleDelay {
                0%,
                70%,
                100% {
                    -webkit-transform: scale3D(1, 1, 1);
                    transform: scale3D(1, 1, 1);
                }
                35% {
                    -webkit-transform: scale3D(0, 0, 1);
                    transform: scale3D(0, 0, 1);
                }
            }
            @keyframes sk-cubeGridScaleDelay {
                0%,
                70%,
                100% {
                    -webkit-transform: scale3D(1, 1, 1);
                    transform: scale3D(1, 1, 1);
                }
                35% {
                    -webkit-transform: scale3D(0, 0, 1);
                    transform: scale3D(0, 0, 1);
                }
            }
            p {
                font-size: 12px;
                color: #9B9B9B;
                text-align: center;
            }
        }
    }
}